<template>
  <el-dialog title="编辑" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" width="1000px" append-to-body>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="平台" prop="plate_id">
        <el-select
          v-model="queryParams.plate_id"
          placeholder="请选择状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in platformList"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="关键词" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入广告名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
      </el-form-item>
    </el-form>
    <el-table :data="parentList"
              ref="allTableData"
              class="tableHightClass"
              :max-height="tableHeight"
              @selection-change="handleSelectionChange"
              :row-key="getRowKey"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55">
      </el-table-column>
      <el-table-column :label="item.label"
                       align="center"
                       v-for="(item,index) in allTableColumns"
                       :prop="item.key"
                       v-if="item.visible?item.visible:true"
                       :fixed="item.fixed?item.fixed:false"
                       :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.num"
      @pagination="getList"
    />
    <div class="operate-Big">
      <el-button icon="el-icon-bottom" @click="getChildData"></el-button>
      <el-button icon="el-icon-top" @click="delChildData"></el-button>
    </div>
    <el-table :data="childList"
              ref="childTable"
              :max-height="tableHeight"
              class="tableHightClass"
              @selection-change="handleChildChange"
              :row-key="getRowKey"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55">
      </el-table-column>
      <el-table-column
        :label="item.label"
        align="center"
        v-for="(item,index) in changesTableColumns"
        :prop="item.key"
        v-if="item.visible?item.visible:true"
        :fixed="item.fixed?item.fixed:false">
      </el-table-column>
    </el-table>

    <div slot="footer" class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="onSubmit('form')">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { reqPlateList, reqGetTaskList, reqPositionTaskList, savePositionTaskList } from '@/api/advergroupPlanMgt/index'

export default {
  name: 'editReviewPlanChanges',
  data() {
    return {
      active: 0,//选中
      total: 8,// 表格的总条数
      platformList: [],//平台集合
      queryParams: {
        page: 1,
        num: 10,
        title: '',//关键字（广告组名称，id）
        plate_id: null//状态
      },
      parentList: [],//父表格数据
      tableHeight: 300,
      allTableColumns: [
        { key: 'plate_name', label: `平台` },
        { key: 'id', label: `活动ID` },
        { key: 'title', label: `活动名称` },
        { key: 'starttime_text', label: `开始日期` },
        { key: 'endtime_text', label: `结束日期` }
      ],
      childList: [],//子表格数据
      changesTableColumns: [
        { key: 'plate_name', label: `平台` },
        { key: 'id', label: `活动ID` },
        { key: 'title', label: `活动名称` },
        { key: 'starttime_text', label: `开始日期` },
        { key: 'endtime_text', label: `结束日期` }
      ],
      parentChangeList: [],//所有数据选中
      childChangeList: [],//被选中的数据集合
      form: {
        id: null,//计划id
        task: null//活动json
      }
    }
  },
  created() {
    this.getList()//获取之前的
    this.getPlateList()//获取平台;
    this.getChildList()//获取子级
  },
  wacth: {},
  methods: {
     getChildList() {
      reqPositionTaskList(this.$attrs.position_id).then(res => {
        console.log('根据版位id', res.data)
        let data = res.data
        data.forEach(item => {
          let plate_name =  this.getPlateNameById(item.plate_id, this.platformList);
          this.$nextTick(()=>{
            setTimeout(()=>{
              let obj = {
                plate_name: plate_name,
                id: item.task_id,
                title: item.title,
                starttime_text: item.start_time,
                endtime_text: item.end_time
              }
              this.childList.push(obj)
            },0)

          })

        })
        console.log('子级回显', this.childList)
        //回显

      })
    },
    getPlateList() {
      //获取平台
      reqPlateList().then(res => {
        console.log('平台数据', res.data)
        this.platformList = res.data
      })
    },
    getRowKey(row) {
      return row.id
    },
    getTab(index) {
      this.active = index

    },
    //搜索广告计划列表
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    //重置表单
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleSelectionChange(val) {
      //全部数据选中
      this.parentChangeList = val
      console.log('选中的数据', val)

    },
    handleChildChange(val) {
      //被选中的表格变化
      this.childChangeList = val
      console.log('子级被选中的代码', val)
    },
    getChildData() {
      if (this.childList.length == 0) {
        this.childList = this.parentChangeList //子表格等于父表格选中的数据
      } else {
        let ids = []//获取id集合
        this.childList.forEach(item => {
          ids.push(item.id)
        })
        this.parentChangeList.forEach(item => {
          if (ids.indexOf(item.id) == -1) {
            this.childList.push(item)         //去重处理
          }
        })
      }
    },
    delChildData() {
      let ids = []
      // 删除选中的
      this.childChangeList.forEach(item => {
        ids.push(item.id)//获取id
      })
      let list = this.childList.filter(item => {
        return ids.indexOf(item.id) == -1
      })
      this.childList = list
      console.log('删除后', list)
    },
    getPlateNameById(id, list) {
      let name = ''
      if (list && list.length > 0) {
        list.forEach(item => {
          if (id == item.id) {
            name = item.name
          }
        })
      }
      return name
    },
    //审核的列表
    async getList() {
      this.loading = true
      if (this.$attrs.plate_id) {
        this.queryParams.plate_id = this.$attrs.plate_id//平台id
      }
      if (this.queryParams.plate_id) {
        let plate_name = await this.getPlateNameById(this.queryParams.plate_id, this.platformList)
        reqGetTaskList(this.queryParams).then(res => {
            this.parentList = res.data.list
            this.parentList.forEach(item => {
              item.plate_name = plate_name
            })
            this.total = res.data.count
            console.log('根据id获取活动', res.data.list)
            this.loading = false
          }
        )
      }
    },
    onSubmit() {
      //点击提交数据
      let list = []
      this.childList.forEach(item => {
        let obj = {
          position_id: this.$attrs.position_id,//版位id
          plate_id: this.queryParams.plate_id,
          task_id: item.id,
          title: item.title,
          start_time: item.starttime_text,
          end_time: item.endtime_text

        }
        list.push(obj)
      })
      this.form.task = JSON.stringify(list)
      this.form.id = this.$attrs.position_id
      savePositionTaskList(this.form).then(res => {
        this.$modal.msgSuccess('提交成功！')
        this.handleCloseDialog()
      })

    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false)
      this.$emit('handleCloseFilter') //关闭弹窗;
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: calc(100vh - 250px);
}

.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;

}
</style>
